<template>
  <div>
    <van-divider
      :style="{ color: '#E2E3E5', borderColor: '#E2E3E5', padding: '0px 16px' }"
    ></van-divider>
    <div class="container">
      <van-tabbar v-model="active" route active-color="#62B6EB">
        <van-tabbar-item
          replace
          v-for="item in tabBar"
          :key="item"
          :to="item.to.path"
        >
          <span>{{ item.title }}</span>
          <template #icon="props">
            <img :src="props.active ? item.icon_a : item.icon_i" />
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import HOME_A from "../../assets/icon/elemo.png";
import HOME_I from "../../assets/icon/homepage.png";
import FIND_A from "../../assets/icon/a-1faxianA.png";
import FIND_I from "../../assets/icon/faxian2.png";
import ORDERLIST_A from "../../assets/icon/gouwuche.png";
import ORDERLIST_I from "../../assets/icon/31gouwuche.png";
import MYINFO_A from "../../assets/icon/a-6wodeA.png";
import MYINFO_I from "../../assets/icon/wode2.png";

const active = ref(0); // 用于控制当前激活的tabbar项
const tabBar = [
  {
    title: "首页",
    to: {
      path: "/first",
    },
    icon_a: HOME_A,
    icon_i: HOME_I,
  },
  {
    title: "神券",
    to: {
      path: "/ticket",
    },
    icon_a: FIND_A,
    icon_i: FIND_I,
  },
  {
    title: "订单",
    to: {
      path: "/orderList",
    },
    icon_a: ORDERLIST_A,
    icon_i: ORDERLIST_I,
  },
  {
    title: "我的",
    to: {
      path: "/myHome",
    },
    icon_a: MYINFO_A,
    icon_i: MYINFO_I,
  },
];
</script>



<style scoped>
.container {
  background-color: #f7f7f7;
}
</style>